<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示所有学生信息</title>

</head>
<body>
{#  forbidden 错误处理#}
{% csrf_token %}
<script src="/web/static/js/jquery-3.3.1.min.js"></script>

<input id="showStu" value="获取所有学生信息" type="button">

<input id="addStu" value="添加学生信息" type="button" onclick="add_Stu()">


<div id="div_stus"></div>

<div id="div_update_stus"></div>

<div id="div_add_stus"></div>



<script>

    $(function () {
    $('#showStu').click(function () {
    //访问/stu/student/  返回所有学生信息
        $.get('/stu/showStu/', function (msg) {
        //给显示的页面加上简单的样式
            s = '<table><tr><td>ID</td><td>姓名</td><td>地址</td><td>操作</td></tr>';
            for (var i = 0; i < msg.length; i += 1) {
                s += '<tr><td>' + msg[i].id + '</td>\
                       <td>' + msg[i].s_name + '</td>\
                       <td>' + msg[i].s_tel + '</td><td>\
                       //进行当前数据的修改\
                       <a href="javascript:;" onclick ="update_stu('+ msg[i].id + ')">编辑</a>|\
                       //进行当前数据的删除\
                       <a href="javascript:;" onclick="del_stu('+ msg[i].id + ')">删除</a></td></tr>\

            }
            s += '</table>';
            $('#div_stus').html(s)
        }, 'json');
    });
});

    function del_stu(i) {
        csrf = $('input[name="csrfmiddlewaretoken"]').val();
        $.ajax({
            url: '/stu/showStu/' + i + '/',
            type: 'DELETE',
            headers: {'X-CSRFToken': csrf},
            dataType: 'json',
            success: function () {
                alert('删除成功')
            },
            error: function () {
                alert('删除失败')

            }
        });
    }

    function update_stu(i) {
        s = '姓名：<input type ="text" id ="s_name" name = "name">\
            电话：<input type ="text" id ="s_tel" name = "tel">\
            <input type ="button" value="提交" onclick="update(' + i + ')">';
        // 将编辑信息页面样式进行保存
        $('#div_update_stus').html(s)

    }

    function update(i) {
        csrf = $('input[name="csrfmiddlewaretoken"]').val();
        s_name = $('#s_name').val();
        s_tel = $('#s_tel').val();
        $.ajax({
            url: '/stu/showStu/' + i + '/',
            type: 'PATCH',
            {#headers :{'X-CSRFToken':csrf},#}
            dataType: 'json',
            data: {'s_name': s_name, 's_tel': 's_tel'},
            success: function (msg) {
                alert('修改成功')
            },
            error: function (msg) {
                alert('修改失败')

            }
        });

    }

    function add_Stu() {
        s = '姓名：<input type ="text" id ="s_name" name = "name">\
            电话：<input type ="text" id ="s_tel" name = "tel">\
            <input type ="button" value="提交" onclick="add()">';
        $('#div_add_stus').html(s)

    }

    function add() {
        csrf = $('input[name="csrfmiddlewaretoken"]').val();
        s_name = $('#s_name').val();
        s_tel = $('#s_tel').val();
        $.ajax({
            url: '/stu/showStu/',
            type: 'POST',
            {#headers :{'X-CSRFToken':csrf},#}
            dataType: 'json',
            data: {'s_name': s_name, 's_tel': 's_tel'},
            success: function (msg) {
                alert('添加成功')
            },
            error: function (msg) {
                alert('添加失败')

            }
        });
    }

</script>


</body>
</html>
